<template>
    <div>
        <van-cell-group>
            <van-field v-model="userInfo.PhoneNo" @blur="change" required label="手机号" placeholder="请输入手机号" requ :error-message="errorMsg" />
            <van-field v-model="userInfo.SMSCode" center clearable required label="短信验证码" placeholder="请输入短信验证码">
                <van-button slot="button" @click="SendSMS" size="small" type="primary">发送验证码</van-button>
            </van-field>
            <van-field v-model="userInfo.LinkMan" required clearable label="联系人" placeholder="请输入姓名" @click-icon="$toast('question')" />
            <van-field required clearable label="行业" v-model="userInfo.UserType" placeholder="请输入姓名" @click="show=true" />
            <van-field required clearable label="企业名称" v-model="userInfo.EntName" placeholder="请输入企业名称" />
            <van-field required clearable label="单位地址" v-model="userInfo.Address" placeholder="请输入地址" />
        </van-cell-group>
        <van-button size="normal" class="mybtn" @click="save" type="primary">注册</van-button>
        <van-actionsheet v-model="show" cancel-text="取消" :actions="actions" @select="itemSelect" />
    </div>
</template>

<script>
    import {
        Toast
    } from 'vant';
    import api from '@/api/api'
    export default {
        data() {
            return {
                errorMsg: '',
                show: false,
                userInfo: {
                    OpenID: '',
                    PhoneNo: '',
                    SMSCode: '',
                    LinkMan: '',
                    UserType: '纺织企业',
                    EntName: '',
                    Address: ''
                },
                actions: [{
                        name: '纺织企业',
                    },
                    {
                        name: '轧花厂',
                    },
                    {
                        name: '贸易商',
                    },
                    {
                        name: '其他',
                    }
                ]
            }
        },
        created() {
            this.userInfo.OpenID = this.$store.state.userInfo.OpenID;
            if (!this.userInfo.OpenID) {
                Toast.fail('请在微信中访问！');
                return;
            }
            var user = this.$store.state.userInfo;
            this.userInfo.PhoneNo = user.phoneno;
            this.userInfo.LinkMan = user.XM;
            this.userInfo.EntName = user.EntName;
            this.userInfo.Address = user.Address;
        },
        methods: {
            SendSMS() {
                var pattern = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
                if (!pattern.test(this.userInfo.PhoneNo)) {
                    this.errorMsg = "手机号码不正确！";
                    return;
                } else {
                    this.errorMsg = "";
                }
                api.SendSMS({
                    phoneno: this.userInfo.PhoneNo
                }).then(res => {
                    Toast.success("发送成功！");
                })
            },
            change() {
                var pattern = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
                if (!pattern.test(this.userInfo.PhoneNo)) {
                    this.errorMsg = "手机号码不正确！";
                } else {
                    this.errorMsg = "";
                }
            },
            itemSelect(item) {
                // 点击选项时默认不会关闭菜单，可以手动关闭               
                this.show = false;
                this.userInfo.UserType = item.name;
                //Toast(item.id);
            },
            save() {
                if (!this.userInfo.OpenID || !this.userInfo.PhoneNo || !this.userInfo.SMSCode || !this.userInfo.EntName || !this.userInfo.UserType || !this.userInfo.Address) {
                    Toast.fail('请填写全部信息！');
                    return;
                }
                api.BindPhone(this.userInfo).then(res => {
                    if (res.success) {
                        this.$store.commit("setUserInfo", res.data);
                        this.$router.push('bindSuccess')
                    } else {
                        Toast.fail(res.msg);
                    }
                })
            }
        },
    }
</script>

<style scoped>
    .mybtn {
        background: #2cb98e;
        width: 80%;
        margin: 10px auto;
    }
</style>